<template>
  <div>
    <v-layout row justify-space-between wrap class="pt-3">
      <v-flex xs4 >
        <span class="headline pl-5 font-weight-bold primary--text ">文产联盟</span>
        <span class="subheading pl-1 font-weight-bold">结算页</span>
      </v-flex>
      <v-flex xs6>
        <v-stepper class="elevation-0" style="background-color:transparent">
          <v-stepper-header>
            <v-stepper-step step="1">加入购物车</v-stepper-step>
            <v-divider></v-divider>
            <v-stepper-step complete step="2">填写核对订单信息</v-stepper-step>
            <v-divider></v-divider>
            <v-stepper-step step="3">成功提交订单</v-stepper-step>
          </v-stepper-header>
        </v-stepper>
      </v-flex>
    </v-layout>
    <v-layout column style="border:1px solid rgba(0,0,0,.12)">
      <v-flex>
        <v-card flat color="transparent" class="ma-3">
          <v-card-title>
            <h3>收货人信息</h3>
          </v-card-title>
          <v-card-text>
            收获地址：
          </v-card-text>
        </v-card>
      </v-flex>
      <v-flex class="my-2 px-3" >
        <v-divider></v-divider>
      </v-flex>
      <v-flex>
        <v-card flat color="transparent" class="ma-3">
          <v-card-title>
            <h3>商品信息</h3>
          </v-card-title>
          <v-card-text>
            <v-layout class="my-1" align-center wrap>
              <v-flex xs12 v-for="item in itemData" :key="item.id">
                <v-layout>
                  <v-flex xs1><v-img :src="item.goods.cover" ></v-img></v-flex>
                  <v-flex xs4 class="px-3"><span>{{item.goods.goods_name}}</span></v-flex>
                  <v-flex xs2 class=""><span>¥{{item.goods.price}}</span></v-flex>
                  <v-flex xs2 class="">
                    <span>{{item.goods_count}}</span>
                  </v-flex>
                  <v-flex xs2 class="text-xs-right"><span>¥{{(item.goods_count * Number.parseFloat(item.goods.price)).toFixed(2)}}</span></v-flex>
                </v-layout>
              </v-flex>
            </v-layout>
          </v-card-text>
        </v-card>
      </v-flex>
      <v-flex class="my-2 px-3" >
        <v-divider></v-divider>
      </v-flex>
      <v-flex>
        <v-card flat color="transparent" class="ma-3">
          <v-card-title>
            <h3>订单总金额</h3>
          </v-card-title>
          <v-card-text>
            ¥{{totoal_amount}}
          </v-card-text>
        </v-card>
      </v-flex>
    </v-layout>
    <v-layout>
      <v-flex class="text-xs-right">
        <router-link :to="{ name: 'ShopCart'}">返回购物车</router-link>
        <v-btn color="primary" large class="my-4" @click="onBtnSubmit"><h3>提交订单，去支付</h3> </v-btn>
      </v-flex>
    </v-layout>
  </div>
</template>
<script>
import { createOne as submitOrderAPI } from '@/api/shop/order.js'
import { selected as selectedAPI } from '@/api/shop/shopCart.js'
export default {
  name: 'PlaceOrder',
  props: {
  },
  data() {
    return {
      itemData: []
    }
  },
  computed: {
    totoal_amount: function () {
      let total = 0.00
      this.itemData.forEach(element => {
        total = Number.parseFloat(total) + (element.goods_count * Number.parseFloat(element.goods.price))
      })
      return total.toFixed(2)
    }
  },
  created: function () {
    if (this.$route.query.selected) {
      this.fetchGoodsItem()
    }
  },
  methods: {
    fetchGoodsItem: function () {
      selectedAPI(this.$route.query.selected).then(res => {
        if (res.data.length === 0) {
          alert('数据错误！请查看您的购物车！')
          this.$router.push({ name: 'ShopCart' })
        } else {
          this.itemData = res.data
        }
      })
    },
    onBtnSubmit: function () {
      submitOrderAPI({ cart_id: this.$route.query.selected }).then(res => {
        // console.log(res.request.response)
        this.$router.push({ name: 'OrderPayment', query: { order_sn: res.request.response } })
      }).catch(err => {
        alert(err.response.data)
      })
    }
  }
}
</script>
